<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Username : {{ username }}</p>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { onMounted, reactive } from 'vue';

export default {
    props:{
        username:{
            type:String,
            required:true,
        },
    },
    setup(props,context){
        const state = reactive({
            message:'',
        });
        onMounted(()=>{
            console.log("完成挂载");
        });

        const sendMessage = () => {
            const {emit} = context;
            emit('send-message', {state,username:props.username});
        };

        return {
            message:state,
            sendMessage
        };
    },
};
</script>

<style>

</style>